<template>
    <div class="father">
        <h3>父组件</h3>
        <h4>房产：{{ house }}</h4>
        
        <button @click="changeToy">修改子组件1的玩具</button>
        <hr>
        <button @click="changeComputer">修改子组件2的电脑</button>
        <hr>
        <button @click="getAllChild($refs)">让所有子组件的书变多</button>
        <Child1 ref="c1"/>
        <Child2 ref="c2"/>
    </div>
</template>

<script setup lang="ts" name="Father">
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'
import {ref} from 'vue'

// 数据
let house = ref(4)
let c1 = ref()
let c2 = ref()

function changeToy() {
    console.log(c1.value,"子组件1中的数据")
    c1.value.toy = '小猪佩奇'
}
function changeComputer() {
    console.log(c2.value,'子组件2中的数据')
    c2.value.computer = '雷神'

}
function getAllChild(refs:any) {
    for(let key in refs){
        refs[key].book += 3
     }
}
// function getAllChild(refs:{[key:string]:any}) {
//      console.log(refs,"打印所有组件的数据")
//      for(let key in refs){
//         refs[key].book += 3
//      }
// }

// 把数据交给外部（宏函数）
defineExpose({house})
</script>

<style scoped>
    .father{
        background-color: rgb(165, 164, 164);
        padding: 20px;
        border-radius: 10px;
    }
</style>